import React, { useState, useEffect } from 'react';
import { useCopilotAction, useCopilotReadable ,useCoAgent} from '@copilotkit/react-core';

const Translator = () => {
    const [text, setText] = useState('');
    const [fontColor, setFontColor] = useState("#000");
    const [translatedText, setTranslatedText] = useState('');
    const [translated, setTranslated] = useState('');

    useEffect(() => {
        window.__MICRO_APP_ENVIRONMENT__ && window.microApp.addDataListener(dataListener, true)
        return () => {
            window.__MICRO_APP_ENVIRONMENT__ && window.microApp.removeDataListener(dataListener)
        }
    }, []);

    function dataListener(data) {
        console.log('来自主应用的数据', data)
        setText(data.text)
    }

    useCopilotReadable({
        description: "Current text to translate and translation result",
        value: {
            originalText: text,
            translatedText: translatedText
        }
    });

    useCoAgent({
        name: "qa_agent",
        initialState: { aggregate: { "kb_id": "kb_agent_1448", "kb_des": "金富科技股份有限公司知识库" } }
    });

    // 定义 Copilot 改字体颜色操作
    useCopilotAction({
        name: "set_font_color",
        description: "Set the Font color of the page.",
        parameters: [{
            name: "fontColor",
            description: "The Font color to set. Make sure to pick nice colors.",
            required: true,
        }],
        handler({ fontColor }) {
            setFontColor(fontColor);
            // 通知主应用
            window.__MICRO_APP_ENVIRONMENT__ && window.microApp.dispatch({
                functionName: 'set_font_color',
                context: fontColor,
                time: Date.now()
            });
        },
    });

    // 定义 Copilot 翻译操作
    useCopilotAction({
        name: "set_translated_text",
        description: "用这个方法来返回翻译结果， 将翻译的内容放在参数 translated 中。",
        parameters: [
            {
                name: "chineseText",
                type: "string",
                description: "The Chinese text that needs to be translated to English",
                required: true
            },
            {
                name: "translated",
                type: "string",
                description: "The translated English content",
                required: true
            }
        ],
        handler: async ({ chineseText, translated }) => {
            console.log("translated:", translated);
            setTranslatedText(chineseText);
            // 通知主应用
            window.__MICRO_APP_ENVIRONMENT__ && window.microApp.dispatch({
                functionName: 'set_translated_text',
                context: translated,
                time: Date.now()
            });
        }
    });

    return (
        <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif', color: fontColor }}>
            <div style={{ marginBottom: '15px' }}>
                <label>从主应用获取的数据:</label>
                <div
                    style={{
                        marginTop: '5px',
                        padding: '10px',
                        backgroundColor: '#f0f8ff',
                        borderRadius: '4px',
                        minHeight: '20px',
                        border: '1px solid #ccc'
                    }}
                >
                    {text || ''}
                </div>
            </div>
        </div>
    );
};

export default Translator;